<template>
  <a-drawer
    width="850px"
    title="数据源配置"
    :visible="visible"
    :zIndex="style.zIndex"
    :bodyStyle="bodyStyle"
    @close="cancel"
    ><div class="eip-drawer-body beauty-scroll">
      <a-form-model
        ref="form"
        :label-col="col.labelCol"
        :wrapper-col="col.wrapperCol"
      >
        <a-form-model-item label="数据源">
          <a-radio-group v-model="source.type" @change="change">
            <a-radio value="table">表</a-radio>
            <a-radio value="view">视图</a-radio>
            <a-radio value="proc">存储过程</a-radio>
            <a-radio value="interface">接口</a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="表结构" v-if="source.type == 'table'">
          <a-select
            placeholder="请选择类型"
            allow-clear
            show-search
            v-model="source.table.name"
            @change="tableChange"
          >
            <a-select-option
              v-for="(item, i) in tables"
              :key="i"
              :value="item.name"
              >{{ item.name }} {{ item.description }}</a-select-option
            >
          </a-select>
        </a-form-model-item>

        <a-form-model-item label="条件" v-if="source.type == 'table'">
          <vxe-table
            row-key
            ref="searchTable"
            :loading="source.table.loading"
            :height="height.table"
            :data="source.table.columns"
          >
            <vxe-table-column
              title="字段"
              width="120px"
              field="column"
            ></vxe-table-column>
            <vxe-table-column title="备注" width="120px" field="description">
              <template v-slot="{ row }">
                {{ row.description }}
                <a-tooltip :title="row.dataType">
                  <a-icon type="question-circle-o" />
                </a-tooltip> </template
            ></vxe-table-column>

            <vxe-table-column title="App关联" width="76px" align="center">
              <template v-slot="{ row }">
                <a-switch v-model="row.app" />
              </template>
            </vxe-table-column>
            <vxe-table-column title="Pc关联" width="70px" align="center">
              <template v-slot="{ row }">
                <a-switch v-model="row.pc" />
              </template>
            </vxe-table-column>
            <vxe-table-column title="运算符" width="130px">
              <template v-slot="{ row }">
                <a-select
                  style="width: 110px"
                  placeholder="请选择类型"
                  v-model="row.type"
                >
                  <a-select-option
                    v-for="(item, i) in filterType"
                    :key="i"
                    :value="item.value"
                    >{{ item.title }}</a-select-option
                  >
                </a-select>
              </template>
            </vxe-table-column>
            <vxe-table-column title="过滤条件(固定值添加单引号)" width="200px">
              <template v-slot="{ row }">
                <a-input :placeholder="row.description" v-model="row.condition">
                  <div
                    @click="tableFilter(row)"
                    slot="addonAfter"
                    style="cursor: pointer"
                  >
                    <a-icon type="search" />
                  </div>
                </a-input>
              </template>
            </vxe-table-column>
          </vxe-table>
        </a-form-model-item>

        <a-form-model-item label="视图" v-if="source.type == 'view'">
          <a-select
            placeholder="请选择类型"
            allow-clear
            show-search
            v-model="source.view.name"
            @change="viewChange"
          >
            <a-select-option
              v-for="(item, i) in views"
              :key="i"
              :value="item.name"
              >{{ item.name }} {{ item.description }}</a-select-option
            >
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="条件" v-if="source.type == 'view'">
          <vxe-table
            row-key
            ref="searchTable"
            :loading="source.view.loading"
            :height="height.view"
            :data="source.view.columns"
          >
            <vxe-table-column
              title="字段"
              width="120px"
              field="column"
            ></vxe-table-column>
            <vxe-table-column title="备注" width="120px" field="description">
              <template v-slot="{ row }">
                {{ row.description }}
                <a-tooltip :title="row.dataType">
                  <a-icon type="question-circle-o" />
                </a-tooltip> </template
            ></vxe-table-column>
            <vxe-table-column title="App关联" width="76px" align="center">
              <template v-slot="{ row }">
                <a-switch v-model="row.app" />
              </template>
            </vxe-table-column>
            <vxe-table-column title="Pc关联" width="70px" align="center">
              <template v-slot="{ row }">
                <a-switch v-model="row.pc" />
              </template>
            </vxe-table-column>
            <vxe-table-column title="运算符" width="130px">
              <template v-slot="{ row }">
                <a-select
                  style="width: 110px"
                  placeholder="请选择类型"
                  v-model="row.type"
                >
                  <a-select-option
                    v-for="(item, i) in filterType"
                    :key="i"
                    :value="item.value"
                    >{{ item.title }}</a-select-option
                  >
                </a-select>
              </template>
            </vxe-table-column>
            <vxe-table-column title="过滤条件(固定值添加单引号)" width="200px">
              <template v-slot="{ row }">
                <a-input :placeholder="row.description" v-model="row.condition">
                  <div
                    @click="tableFilter(row)"
                    slot="addonAfter"
                    style="cursor: pointer"
                  >
                    <a-icon type="search" />
                  </div>
                </a-input>
              </template>
            </vxe-table-column>
          </vxe-table>
        </a-form-model-item>

        <a-form-model-item label="存储过程" v-if="source.type == 'proc'">
          <a-select
            placeholder="请选择类型"
            allow-clear
            show-search
            v-model="source.proc.name"
          >
            <a-select-option
              v-for="(item, i) in procs"
              :key="i"
              :value="item.name"
              >{{ item.name }} {{ item.description }}</a-select-option
            >
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="请求类型" v-if="source.type == 'interface'">
          <a-select placeholder="请选择类型" v-model="source.interface.type">
            <a-select-option value="POST">POST</a-select-option>
            <a-select-option value="GET">GET</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="请求地址" v-if="source.type == 'interface'">
          <a-input
            v-model="source.interface.url"
            type="textarea"
            placeholder="请输入请求地址"
          />
        </a-form-model-item>
      </a-form-model>
    </div>
    <div class="eip-drawer-toolbar">
      <a-space>
        <a-button key="back" @click="cancel"
          ><a-icon type="close" />取消</a-button
        >
        <a-button key="submit" @click="ok" type="primary"
          ><a-icon type="save" />提交</a-button
        >
      </a-space>
    </div>
  </a-drawer>
</template>

<script>
import {
  table,
  view,
  proc,
  column,
} from "@/services/system/agile/common/data/source";
export default {
  name: "data-source",
  data() {
    return {
      col: {
        labelCol: { span: 2 },
        wrapperCol: { span: 22 },
      },
      bodyStyle: {
        padding: "4px",
       
      },
      style: {
        zIndex: 1030,
      },

      filterType: [
        { value: "cn", title: "包含" },
        { value: "eq", title: "等于" },
        { value: "ne", title: "不等" },
        { value: "bw", title: "开始于" },
        { value: "bn", title: "不开始于" },
        { value: "ew", title: "结束于" },
        { value: "en", title: "不结束于" },
        { value: "nc", title: "不包含" },
        { value: "nu", title: "空值" },
        { value: "nn", title: "非空值" },
        { value: "date", title: "等于" },
        { value: "daterange", title: "之间" },
        { value: "lt", title: "小于" },
        { value: "le", title: "小于等于" },
        { value: "gt", title: "大于" },
        { value: "ge", title: "大于等于" },
      ],

      height: {
        table: window.innerHeight - 312,
        view: window.innerHeight - 312,
      },
      config: {
        name: null, //数据源名称,表名称，视图名称，存储过程名称等
        type: null, //配置数据类型
        conditions: [], //所以配置条件
        interface: {
          //若是接口
          type: null, //类型POST  GET
          url: null, //请求地址
        },
      },
      source: {
        type: "table",
        table: {
          loading: false,
          name: null,
          columns: [],
        },
        proc: {
          name: null,
        },
        view: {
          loading: false,
          name: null,
          columns: [],
        },
        interface: {
          type: "POST",
          url: null,
        },
      },

      tables: [], //所有列表下拉数据
      views: [], //所有视图下拉
      procs: [], //所有存储过程下拉
    };
  },

  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },

  methods: {
    /**
     * 取消
     */
    cancel() {
      this.$emit("update:visible", false);
    },

    /**
     * 保存
     */
    ok() {
      //筛选
      let okConfig = {};
      okConfig.type = this.source.type;
      switch (this.source.type) {
        case "table":
          okConfig.name = this.source.table.name;
          okConfig.conditions = this.source.table.columns.filter(
            (f) => f.condition
          );
          break;
        case "proc":
          okConfig.name = this.source.proc.name;
          break;
        case "view":
          okConfig.name = this.source.view.name;
          okConfig.conditions = this.source.view.columns.filter(
            (f) => f.condition
          );
          break;
        case "interface":
          okConfig.interface = this.source.interface;
          break;
      }
      this.$emit("ok", okConfig);
    },

    /**
     * 类型改变
     */
    change() {
      switch (this.source.type) {
        case "table":
          this.initTable();
          break;
        case "proc":
          this.initProc();
          break;
        case "view":
          this.initView();
          break;
      }
    },

    /**
     * 初始化表
     */
    initTable() {
      let that = this;
      table().then((result) => {
        that.tables = result.data;
      });
    },

    /**
     * 初始化存储过程
     */
    initProc() {
      let that = this;
      proc().then((result) => {
        that.procs = result.data;
      });
    },

    /**
     * 初始化视图
     */
    initView() {
      let that = this;
      view().then((result) => {
        that.views = result.data;
      });
    },

    /**
     * 表切换
     */
    tableChange() {
      let that = this;
      that.source.table.loading = true;
      column({
        name: that.source.table.name,
      }).then((result) => {
        that.source.table.columns = this.getColumns(result.data);
        that.source.table.loading = false;
      });
    },

    /**
     * 视图切换
     */
    viewChange() {
      let that = this;
      that.source.view.loading = true;
      column({
        name: that.source.view.name,
      }).then((result) => {
        that.source.view.columns = this.getColumns(result.data);
        that.source.view.loading = false;
      });
    },

    /**
     *获取列配置
     */
    getColumns(data) {
      let columns = [];
      let that = this;
      data.forEach((element) => {
        let column = {
          app: true,
          pc: true,
          column: element.name,
          dataType: element.dataType,
          type: "cn",
          condition: null,
          description: element.description,
        };
        //判断是否在已配置项里面
        if (that.config.conditions.length > 0) {
          let condition = that.config.conditions.filter(
            (f) => f.column == element.name
          );
          if (condition.length > 0) {
            column.op = condition[0].op;
            column.condition = condition[0].condition;
            column.pc = condition[0].pc;
            column.app = condition[0].app;
          }
        }
        columns.push(column);
      });
      return columns;
    },

    /**
     * 初始化
     */
    init(config) {
      if (config) {
        this.config = config;
        this.source.type = config.type;
        this.change();
        switch (this.source.type) {
          case "table":
            this.source.table.name = config.name;
            this.tableChange();
            break;
          case "proc":
            this.source.proc.name = config.name;
            break;
          case "view":
            this.source.view.name = config.name;
            this.viewChange();
            break;
        }
      } else {
        this.initTable();
        this.source = {
          type: "table",
          table: {
            name: null,
            columns: [],
          },
          proc: {
            name: null,
          },
          view: {
            name: null,
            columns: [],
          },
          interface: {
            type: "POST",
            url: null,
          },
        };
      }
    },
  },
};
</script>

<style lang="less" scoped>
</style>
